<template>
  <div style="padding: 0; margin: 0; box-sizing: border-box; font-family: Arial, sans-serif; display: flex; flex-direction: column;">
    <div style="flex: 1; display: flex; flex-direction: column;">
      <el-row style="flex: 1;">
        <el-col :span="16">
          <div style="
            height: 350px;
            margin: 0;
            padding: 10px 5px 5px 50px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;"
          >
            <el-carousel :interval="2000" type="card" height="350px">
              <el-carousel-item v-for="(item, index) in carouselroute" :key="index" style="width: 450px; cursor: pointer;" @click="handleClick(item.path)">
                <div style="display: flex; flex-direction: column; height: 100%;">
                  <img :src="item.src" alt="carousel image" style="width: 100%; height: 85%; object-fit: fill;">
                  <div style="width: 100%; height: 15%; background-color: rgba(0, 0, 0, 0.7); color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; padding: 0 10px; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.5);">
                    {{ item.title }}
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="7">
          <div style="
            height: 175px;
            margin: 0;
            padding: 10px 5px 5px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;"
          >
            <el-card class="custom-card" @click="handleClick('user')">
              <div class="service-icon"><el-icon size="25"><User /></el-icon></div>
              <h3>个人信息</h3>
            </el-card>
            <el-card class="custom-card" @click="handleClick('user/course')">
              <div class="service-icon"><el-icon size="25"><DataLine /></el-icon></div>
              <h3>我的课程</h3>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="flex: 1; display: flex; flex-direction: column;">
      <el-row style="flex: 1;">
        <el-col :span="4">
          <div style="
            height: 150px;
            margin: 0;
            padding: 5px 0 5px 50px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;"
          >
            <el-card class="custom-card" @click="handleClick('notice')">
              <div class="service-icon"><el-icon size="25"><Compass /></el-icon></div>
              <h3>平台公告</h3>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="
            height: 150px;
            margin: 0;
            padding: 5px 10px 5px 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;">
            <el-card class="custom-card" @click="handleClick('item7')">
              <div class="service-icon"><el-icon size="25"><VideoPlay /></el-icon></div>
              <h3>课程推荐</h3>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="
            height: 150px;
            margin: 0;
            padding: 5px 10px 5px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;"
          >
            <el-card class="custom-card" @click="handleClick('item7')">
              <div class="service-icon"><el-icon size="25"><List /></el-icon></div>
              <h3>教学评价</h3>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="
            height: 150px;
            margin: 0;
            padding: 5px 10px 5px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;"
          >
            <el-card class="custom-card" @click="handleClick('item7')">
              <div class="service-icon"><el-icon size="25"><Star /></el-icon></div>
              <h3>收藏课程</h3>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="
            height: 150px;
            margin: 0;
            padding: 5px 10px 5px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;"
          >
            <el-card class="custom-card" @click="handleClick('order')">
              <div class="service-icon"><el-icon size="25"><Checked /></el-icon></div>
              <h3>我的订单</h3>
            </el-card>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="
            height: 150px;
            margin: 0;
            padding: 5px 5px 5px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;"
          >
            <el-card class="custom-card" @click="handleClick('warn')">
              <div class="service-icon"><el-icon size="25"><WarningFilled /></el-icon></div>
              <h3>问题反馈</h3>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="height: 75px"></div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
// 定义轮播图点击路径和图片路径
const carouselroute = ref([
  { path: 'news1', src: require('@/../public/imgs/news/1.png'), title: '达达中学迎新春联欢会——“金蛇送福”欢乐多' },
  { path: 'news2', src: require('@/../public/imgs/news/2.png'), title: '达达中学召开安全专题培训会议，筑牢校园防线' },
  { path: 'news3', src: require('@/../public/imgs/news/3.png'), title: '达达中学元旦假期安全教育告家长书' },
  { path: 'news4', src: require('@/../public/imgs/news/5.png'), title: '达达中学学校食堂荣获“省级健康食堂”称号' },
  { path: 'news5', src: require('@/../public/imgs/news/4.png'), title: '2025“百城千校万企”促就业行动在湖北启动' }
])

const handleClick = (item) => {
  console.log('点击路径:', item) // 调试输出
  const routePath = `/${item}`

  // 检查路由是否存在
  if (router.resolve(routePath).matched.length > 0) {
    router.push(routePath)
  } else {
    ElMessage.error(`诶呀，界面过期啦~`)
    // 可以在这里添加默认处理逻辑，例如跳转到首页或其他页面
    router.push('/menu')
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 350px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.custom-card {
  background-color: #3A7BFF;
  color: #FFFFFF;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.custom-card:hover {
  background-color: #2C6AEB;
}

.custom-card:active {
  background-color: #1A59D1;
  transform: scale(0.98);
}

.custom-card.is-disabled {
  background-color: #E0E0E0;
  border-color: #CCCCCC;
  color: #999999;
}

.custom-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  opacity: 0;
}

.custom-card:active::after {
  transform: translate(-50%, -50%) scale(2);
  opacity: 1;
}
</style>
